<template>
  <div class="userDetail ">
    <back-level :go-page="returnClick"/>
    <div class="faultHandlingMode zy-content " v-if="!userListShowF">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{ $t('工号/姓名') }}</p>
              <div class="ipt">
                <Select v-model="empno" filterable clearable :placeholder="`${$t('common.inputInfo')}`"
                        @on-query-change="timeOutgetUserNo">
                  <Option v-for="(item,index) of userNoArr" :value="item.empno" :key="index">
                    {{ item.empno + '-' + item.realname }}
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button
                  class="reset-btn"
                  @click="changeNum()"
                  v-has="'dmsPurchaseList'"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button v-if="checkBtnPermission.roleAddRoleUsers" @click="createfaultCodeShowH">{{$t('common.New')}}</Button>
          <Button v-if="checkBtnPermission.roleDeleteRoleUser" @click="delFaultCodeShowClick">{{$t('common.batchDelete')}}</Button>
        </div>

        <div class="tableContent">
          <Table ellipsis ref="selection" :columns="columns" :data="dataArr" @on-selection-change="onSelectChange">
            <template slot-scope="{ row ,index}" slot="action">
                <span class="operationBtn" @click="delPrrShowH(row)" v-if="checkBtnPermission.roleDeleteRoleUser">{{$t('common.Delete')}}</span>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="delIds.length"/>
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                @on-change="changePageNum"
                @on-page-size-change="changePageSize" show-sizer show-total/>
        </div>
      </div>
      <Modal :mask-closable="false"
        v-model="create"
        title="角色分配用户"
        :loading="loading"
        width="1200">
        <Row style="padding-bottom:16px">
          <Col span="4" align="center" style="line-height:32px">
            工号/姓名：
          </Col>
          <Col span="6" align="left">
            <Input v-model="userKey" :placeholder="`${$t('common.inputInfo')}`" clearable
                   @on-change="getUserList(userKey)"/>
          </Col>
          <Col span="2" align="center">

          </Col>
          <Col span="12" align="center" style="line-height:32px">
            已选用户列表
          </Col>
        </Row>
        <Row>
          <Col span="12" align="center">
            <Table ellipsis ref="selection" :columns="userColumns" :data="userList" height="520" width="580">
              <template slot-scope="{ row ,index}" slot="action">
                <span style="color: #3271f0;cursor: pointer;" @click="selectClick(row)">选择</span>
              </template>
            </Table>
          </Col>
          <Col span="12" align="center">
            <Table ellipsis ref="selection" :columns="userColumns" :data="selectList" height="520" width="580">
              <template slot-scope="{ row ,index}" slot="action">
                <span style="color: #3271f0;cursor: pointer;"
                      v-if="checkBtnPermission.roleDeleteRoleUser"
                      class="operationBtn" @click="delClick(row)" >
                  {{ $t('common.Delete') }}
                </span>
              </template>
            </Table>
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
          <Button type="primary" :loading="loading" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
      </Modal>
      <Modal :mask-closable="false"
        v-model="delFaultCodeShowF"
        class="modal-title-layout"
        :title="$t('common.Delete')"
      >
        <div class="icon red">
          <i class="iconfont zy-common-shanchu"></i>
        </div>
        <p class="title">
          <span>{{$t('common.confirmDelete')}}</span>
        </p>
        <div slot="footer">
          <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
          <Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
export default {
  name: "userDetail",
  components: {},
  props: [
    'roleId'
  ],
  data() {
    return {
      userKey: '',
      userList: [],
      empno: '',
      selectList: [],
      id: this.roleId,
      allCheck: false,
      loading: false,
      create: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          key: 'selection',
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          // title: '工号',
          title: `${this.$t('工号')}`,
          key: 'empno',
          align: 'center'
        },
        {
          // title: '用户名称',
          title: `${this.$t('用户名')}`,
          key: 'realname',
          align: 'center'
        },
        {
            title: `${ this.$t('common.operation') }`,
            slot: "action",
            align: "center"
        }
      ],
      userColumns: [
        {
          title: '工号',
          key: 'empno',
          align: 'center'
        },
        {
          title: '用户名称',
          key: 'realname',
          align: 'center'
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          align: "center"
        }
      ],
      dataArr: [],
      delFaultCodeShowF: false,//是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
      userNoArr: [],
      checkBtnPermission: {},
    }
  },
  mounted() {
    this.searchList();
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for (let item of itemList) {
      if (item.code == "roleAddRoleUsers") {
        this.checkBtnPermission.roleAddRoleUsers = true
      }
      if (item.code == "roleDeleteRoleUser") {
        this.checkBtnPermission.roleDeleteRoleUser = true
      }
    }
  },
  methods: {
    selectClick(row) {
      let status = false
      this.selectList.some((item, i) => {
        if (item.id === row.id) {
          this.$Message.warning(({content: "该用户已被选择", duration: 6, closable: true}));
          status = true
        }
      })
      if (status === false) {
        this.selectList.unshift(row)
      }
    },
    delClick(row) {
      this.selectList.some((item, i) => {
        if (item.id === row.id) {
          this.selectList.splice(i, 1)
          return true
        }
      })
    },
    //延时查询
    timeOutgetUserNo(query) {
      clearTimeout(this.timeout);
      let isSearchF = false;
      this.timeout = setTimeout(() => {
        if (query != "") {
          for (let item of this.userNoArr) {
            if (item.empno == query || item.empno + '-' + item.realname == query || item.realname == query) {
              isSearchF = true
            }
          }
          if (isSearchF == false) {
            this.getUserNo(query);
          }
        }
      }, 500);
    },
    getUserNo(query) {
      this.axios({
        method: 'get',
        url: '/basic/user/searchUser',
        params: {
          key: query
        }
      }).then(res => {
        if (res.code === 200) {
          this.userNoArr = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getUserList(query) {
      this.axios({
        method: 'get',
        url: '/basic/user/searchUser',
        params: {
          key: query
        }
      }).then(res => {
        if (res.code === 200) {
          this.userList = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    returnClick() {
      this.$emit('returnClick');
    },
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {//查询列表
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        id: this.id,
        empno: this.empno
      };
      this.axios({
        method: 'get',
        url: "/basic/role/getUsersByRoleId",
        params: params
      }).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.list
          this.total = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      });
    },
    createfaultCodeShowH(row) {//点击增加或编辑
      this.getUserList()
      this.userKey = ''
      this.selectList = []
      this.create = true;
    },
    addOk() {
      let params = {
        roleId: this.id,
        userIds: []
      }
      if (this.selectList.length < 1) {
        this.$Message.warning(({content: "请选择用户后提交", duration: 6, closable: true}));
        return false
      }
      params.userIds = this.selectList.map((item, index) => {
        return item.id
      })
      this.loading = true;
      this.axios({
        method: 'post',
        url: "/basic/role/addRoleUsers",
        data: params
      }).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.create = false;
          this.changeNum()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      });
    },
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item, index) => {
        myArray.push(item.userId);
      });
      if (myArray.length > 0) {
        this.allCheck = true
      } else {
        this.allCheck = false
      }
      this.delIds = myArray;
    },
    delFaultCodeShowClick() {//点击批量删除
      if(!this.delIds || this.delIds.length < 1){
        this.$Message.warning(this.$t('common.selectInfo'));
        return;
      }
      this.delFaultCodeShowF = true;
    },
    delPrrShowH(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.delIds = [row.userId];
    },
    deleteOk() {
      this.loading = true;
      this.axios({
        method: 'post',
        url: '/basic/role/deleteRoleUser',
        data: {
          roleId: this.id,
          userIds: this.delIds
        }
      }).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.changeNum();
          this.$Message.success("删除成功");
          this.delFaultCodeShowF = false;
          this.allCheck = false
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.userDetail {

  .formList {
    padding: 30px;

    .btn {
      // margin-top: 20px;
      text-align: center;
      width: 100%;
      height: 40px;
    }

    .inputBorder {
      border: 1px solid #dcdee2;
      border-radius: 4px;

    }
  }

  .searchBox {
    // margin-top: 10px;
    background-color: #fff;
    height: 60;
    // padding: 10px;
    line-height: 35px;
  }

  .tableContent {
    margin-top: 6px;

    .operationBtn {
      color: #3271f0;
      cursor: pointer;
      margin: 0 5px;
    }
  }

  .operationBtns {
    padding: 15px;

    .ivu-checkbox-wrapper {
      float: left;
      margin-right: 15px;
      line-height: 35px;

      .ivu-checkbox {
        margin-right: 10px;
      }
    }

    .batchDeletion {
      width: 135px;
      height: 35px;
      border-radius: 35px;
      color: #1994f7;
      background-color: #fff;

      i {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        line-height: 35px;
      }
    }

    .creatBtn, .batchImport, .exportTemplate {
      float: right;
      margin-left: 55px;
      font-weight: normal;
      cursor: pointer;

      i {
        font-size: 30px;
        color: #2296f4;
      }

      span {
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #555;
        font-size: 16px;
      }
    }

    .exportTemplate {
      i {
        color: #ffb900;
      }
    }
  }

  .tableWrap {
    min-height: 550px;

    .ivu-table-wrapper {
      border: 0;

      .ivu-table {
        .ivu-table-header {
          table {
            border: 0;

            thead {
              border: 0;

              tr {
                border: 0;

                th {
                  border: 0;
                  border-bottom: 5px solid #f3f4fa;
                  font-weight: normal;
                  color: #999;
                  background-color: #fff;

                  .ivu-table-cell-with-selection {
                    display: none;
                  }
                }
              }
            }
          }
        }

        .ivu-table-body {
          table {
            .ivu-table-tbody {
              .ivu-table-row {
                td {
                  border: 0;
                  border-bottom: 1px solid #dcdcdc;

                  .ivu-table-cell {
                    .editBtn, .deleteBtn {
                      display: inline-block;
                      vertical-align: middle;
                      margin: 0 10px;
                      color: #2296f4;
                      cursor: pointer;
                    }
                  }
                }
              }

              .ivu-table-row:last-child {
                td {
                  border: 0;
                }
              }
            }
          }
        }
      }

      .ivu-table:before, .ivu-table:after {
        display: none;
      }
    }


  }

  .pageWrap {
    //padding: 15px;
    //text-align: center;
    //.ivu-page {
    //    .ivu-page-total {
    //        display: inline-block;
    //        vertical-align: middle;
    //        min-width: 100px;
    //        height: 32px;
    //        line-height: 30px;
    //        margin-right: 4px;
    //        text-align: center;
    //        list-style: none;
    //        background-color: #fff;
    //        -webkit-user-select: none;
    //        -moz-user-select: none;
    //        -ms-user-select: none;
    //        user-select: none;
    //        cursor: pointer;
    //        font-family: Arial;
    //        font-weight: 500;
    //        border: 1px solid #dcdee2;
    //        border-radius: 4px;
    //        transition: border .2s ease-in-out, color .2s ease-in-out;
    //    }
    //}
  }
}
</style>

<style lang="scss">
.titleP {
  font-size: 20px;
  text-align: center;
}

.formList {
  input[type=text] {
    //  border: 1px solid #dcdee2;
  }

}

.enableContent {
  padding-top: 86px;

  .enableContentInner {
    text-align: center;
    margin-bottom: 40px;
  }

  .enableTips {
    text-align: center;

    span {
      font-size: 16px;
      color: #ff2b4e;
    }
  }
}

.userDetail {
  .searchBox {
    .ivu-input {
      border: 1px solid #dcdee2;
    }

    .ivu-date-picker {
      width: 100%;
    }
  }
}
</style>
